<template>
  <div class="plan_wrap">
    <search-main
      :inputValue="formData.keyword"
      :placeValue="placeValue"
      @handleSearch="handleSearch"
    />
    <div class="container_width common_wrap">
      <el-divider>标准计划</el-divider>
      <el-card class="box-card position-re mb-10">
        <el-form
          ref="formData"
          :model="formData"
          label-width="100px"
          class="form_search"
        >
          <el-form-item label="项目状态：">
            <el-radio-group v-model="formData.progress" @input="getList">
              <el-radio
                v-for="(item, index) in statusList"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="下达日期：">
            <el-radio-group v-model="formData.durDate" @input="getList">
              <el-radio v-for="(item, index) in dateList" :label="item.value">{{
                item.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="ICS分类：">
            <el-radio-group
              v-model="formData.ccs"
              class="radio_wrap"
              :style="{ height: expandFlag ? 'auto' : '72px' }"
              @input="getList"
            >
              <el-radio
                v-for="(item, index) in classList"
                :label="item.standardCode"
              >
                <p class="radio_box">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    placement="top"
                    :content="item.standardName"
                  >
                    <span class="radio_text text-hidden">
                      {{ item.standardName }}
                    </span>
                  </el-tooltip>
                  <span v-if="item.standardName != '全部'"
                    >(<span class="num_color">{{ item.total }}</span
                    >)
                  </span>
                </p>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-button class="screen_btn" type="primary" @click="getList"
            >筛选</el-button
          > -->
          <el-row class="text-center">
            <span class="pointer expand_style" @click="changeExpand">
              {{ expandFlag ? "收起" : "展开" }}
              <i
                :class="[
                  expandFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                ]"
              ></i>
            </span>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <el-table
          :data="tableData"
          :header-cell-style="{ 'background-color': '#2f74d3', color: '#fff' }"
          style="width: 100%"
        >
          <el-table-column prop="standardPlanNo" width="140" label="计划号">
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/plan/detail', scope.row.standardPlanNo)"
              >
                {{ scope.row.standardPlanNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" show-overflow-tooltip label="项目名称">
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/plan/detail', scope.row.standardPlanNo)"
                v-html="scope.row.title"
              ></div>
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="项目状态" width="120">
          </el-table-column>
          <el-table-column prop="standardization" label="制修订" width="120">
          </el-table-column>
          <el-table-column
            prop="scheduledDate"
            label="计划下达日期"
            width="150"
          >
          </el-table-column>
        </el-table>
        <div class="pagination_wrap">
          <div>
            共<span class="num_color"> {{ total }} </span>条记录
          </div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout=" sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
     
  </div>
</template>

<script>
import SearchMain from "@/components/SearchMain.vue";
import { standardPlans, planClass } from "@/api/home.js";
export default {
  name: "Plan",
  components: {
    SearchMain,
  },
  data() {
    return {
      value: "",
      placeValue: "请输入计划号或项目名称",
      pageNo: 1,
      pageSize: 10,
      total: 0,
      formData: {
        progress: "",
        ccs: "",
        durDate: "",
        keyword: "", //检索词
      },
      tableData: [],
      statusList: [
        { label: "全部", value: "" },
        { label: "起草中", value: "起草" },
        { label: "征求意见中", value: "征求意见" },
        { label: "审查中", value: "审查" },
        { label: "批准中", value: "批准" },
        { label: "已终止", value: "终止" },
      ],
      dateList: [
        { label: "全部", value: "" },
        { label: "近一月", value: "0" },
        { label: "近三月", value: "1" },
        { label: "近半年", value: "2" },
        { label: "近两年", value: "3" },
        { label: "近三年", value: "4" },
      ],
      classList: [{ standardName: "全部", standardCode: "" }],
      expandFlag: false,
    };
  },
  created() {
    this.planClass();
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        ...this.formData,
        pageNo: this.pageNo - 1,
        pageSize: this.pageSize,
      };
      standardPlans(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
          if (this.formData.keyword) {
            this.filterWords();
          }
        }
      });
    },
    planClass() {
      planClass().then((res) => {
        if (res.code == 200) {
          this.classList.push(...res.data);
        }
      });
    },
    changeExpand() {
      this.expandFlag = !this.expandFlag;
    },
    handleSearch(value) {
      this.formData.keyword = value;
      // 重新输入关键字 清空筛选项
      this.formData.progress = "";
      this.formData.ccs = "";
      this.formData.durDate = "";
      this.pageNo = 1;
      this.pageSize = 10;
      this.getList();
    },
    // 过滤输入的关键字 显示为红字
    filterWords() {
      this.tableData.map((item) => {
        item.title = item.title.replace(
          this.formData.keyword,
          '<span class="num_color">' + this.formData.keyword + "</span>"
        );
        return item;
      });
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    goPath(path, no) {
      this.$router.push({
        path,
        query: {
          no,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.plan_wrap {
  .common_wrap {
    .form_search {
      .el-form-item {
        margin-bottom: 0;
        padding: 10 26px;
      }
    }
    .radio_wrap {
      width: 760px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      .el-radio {
        text-wrap: wrap;
        line-height: 36px;
        display: flex;
        align-items: center;
      }
      .radio_box {
        display: flex;
        align-items: center;
      }
      .radio_text {
        display: inline-block;
        max-width: 100px; /* 定义容器宽度 */
        line-height: 16px;
      }
    }
    .expand_style {
      line-height: 30px;
      color: #2f74d3;
      font-size: 14px;
    }
    .el-radio .el-radio__input {
      display: none;
    }
    .el-radio.is-checked .el-radio__label {
      font-weight: bold;
    }
  }
}
</style>
